<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">下拉菜单</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '0' }">
			<w-dropdown :dropList="dropList" @clickDropdownItem="clickDropdownItem"></w-dropdown>
		</pageDemoBlock>
		<pageDemoBlock title="自定义颜色" color="#e42f0f" :contentStyle="{ padding: '0' }">
			<w-dropdown :dropList="dropList2" activeColor="#289606" @clickDropdownItem="clickDropdownItem"></w-dropdown>
		</pageDemoBlock>
		<pageDemoBlock title="自定义高度(两种布局方式)" color="#aae409" :contentStyle="{ padding: '0' }">
			<w-dropdown @clickDropdownItem="clickDropdownItem" :dropList="dropList3" dropdownHeight="100" activeColor="#1989FA"></w-dropdown>
		</pageDemoBlock>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block';
export default {
	components: {
		pageDemoBlock
	},
	data() {
		return {
			dropList: [
				{
					defaultSelectedIndex: 0,
					key: 'sort',
					type: 'line',
					detailList: [
						{
							title: '综合',
							value: 'sales'
						},
						{
							title: '信用',
							value: 'hPrice'
						},
						{
							title: '销量',
							value: 'lPrice'
						}
					]
				},
				{
					defaultSelectedIndex: 0,
					key: 'priceSection',
					type: 'line-flexbox',
					detailList: [
						{
							title: '价格区间',
							value: 'section'
						},
						{
							title: '100-300',
							value: '100-300'
						},
						{
							title: '300-600',
							value: '300-600'
						},
						{
							title: '600-900',
							value: '600-900'
						},
						{
							title: '900-1200',
							value: '900-1200'
						},
						{
							title: '1200-1500',
							value: '1200-1500'
						},
						{
							title: '1500以上',
							value: '1500'
						}
					]
				}
			],
			dropList2: [
				{
					defaultSelectedIndex: 0,
					key: 'sort',
					type: 'line',
					detailList: [
						{
							title: '销量最高',
							value: 'sales'
						},
						{
							title: '车价最高',
							value: 'hPrice'
						},
						{
							title: '车价最低',
							value: 'lPrice'
						}
					]
				},
				{
					defaultSelectedIndex: 0,
					key: 'brand',
					type: 'line-flexbox',
					detailList: [
						{
							title: '品牌筛选',
							value: 'brandscreen'
						},
						{
							title: '宝马',
							value: 'bmw'
						},
						{
							title: '奥迪',
							value: 'audi'
						},
						{
							title: '奔驰',
							value: 'benz'
						},
						{
							title: '雪佛兰',
							value: 'chevrolet'
						},
						{
							title: '比亚迪',
							value: 'byd'
						},
						{
							title: '长安',
							value: 'changan'
						},
						{
							title: '领克',
							value: 'link'
						},
						{
							title: '保时捷',
							value: 'porsche'
						},
						{
							title: '大众',
							value: 'public'
						},
						{
							title: '本田',
							value: 'honda'
						}
					]
				}
			],
			dropList3: [
				{
					defaultSelectedIndex: 0,
					key: 'sort',
					type: 'line',
					detailList: [
						{
							title: '默认排序',
							value: 'default'
						},
						{
							title: '距离最远',
							value: 'sales'
						},
						{
							title: '距离最近',
							value: 'hPrice'
						}
					]
				},
				{
					defaultSelectedIndex: 1,
					key: 'goods',
					type: 'line-flexbox',
					detailList: [
						{
							title: '全部商品',
							value: 'all'
						},
						{
							title: '新款商品',
							value: 'new'
						},
						{
							title: '活动商品',
							value: 'activity'
						}
					]
				},
				{
					defaultSelectedIndex: 1,
					key: 'salesVolume',
					type: 'line',
					detailList: [
						{
							title: '销量排行',
							value: 'sales'
						},
						{
							title: '销量高到低',
							value: 'high'
						},
						{
							title: '销量低到高',
							value: 'low'
						}
					]
				}
			]
		};
	},
	methods: {
		clickDropdownItem(result) {
			console.log(result);
		}
	}
};
</script>

<style lang="scss" scoped></style>
